<template>
  <div>
    <ul id="nav" v-show="$route.path != '/login' && $route.path != '/reg'">
      <!-- 底部菜单栏 -->
      <li
        :class="{ active: currentPath == item.path }"
        v-for="item in list"
        :key="item.id"
        @click="change(item.path)"
      >
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
      <!-- <li><router-link to="">列表页</router-link></li>
      <li><router-link to="">购物车</router-link></li>
      <li><router-link to="">我的</router-link></li> -->
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // isShow: true,
      currentPath: "/home",
      list: [
        {
          id: 1,
          name: "首页",
          path: "/home",
        },
        {
          id: 2,
          name: "列表页",
          path: "/list",
        },
        {
          id: 3,
          name: "购物车",
          path: "/cart",
        },
        {
          id: 4,
          name: "我的",
          path: "/mine",
        },
      ],
    };
  },

  components: {},

  methods: {
    change(path) {
      this.currentPath = path; //高亮
    },
  },

  //进入页面
  created() {
    //这个钩子只执行一次
    // console.log(this.$route);
    // let path = this.$route.path;
    // if (path == ("/reg" || "/login")) {
    //   //等号的优先级高于 或优先级 () ! * / % + - < > <= >= == != === !== && ||
    //   this.isShow = false;
    // }
  },

  watch: {
    //面试题：watch和updated有什么区别：watch一般用于监听某个属性的变化而执行功能，可以监听路由对象；updated只要data数据有变化都会触发，不能监听路由对象
    $route: {
      deep: true,
      handler(newRoute) {
        console.log(newRoute);
        this.currentPath = newRoute.path;
      },
    },
  },
};
</script>

<style scoped lang="scss">
@import "../assets/sass/public/vw.scss";
* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  height: 100vh;
}
#nav {
  width: 100%;
  height: vw(80);
  //   background: #ccc;
  position: fixed;
  left: 0;
  bottom: 0;
  li {
    float: left;
    list-style: none;
    width: 25%;
    height: vw(80);
    line-height: vw(80);
    text-align: center;
  }
  li.active {
    background: lightcoral;
  }
}
</style>
